import { useEffect, useState } from "react";
import { Table, Tooltip, Pagination } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { staticDataGet } from "@/assets/js/networkRequest/method";

// 总览数据
let overview: any = [
  {
    name: "导入总客户数",
    num: 0,
    detail: true,
    status: "",
  },
  {
    name: "待分配客户数",
    num: 0,
    detail: true,
    status: "NEW",
  },
  {
    name: "待添加客户数",
    num: 0,
    detail: true,
    status: "WAIT",
  },
  {
    name: "待通过客户数",
    num: 0,
    detail: true,
    status: "ADD",
  },
  {
    name: "已添加总客户数",
    num: 0,
    detail: true,
    status: "PASS",
  },
  {
    name: "添加完成率",
    num: 0,
    detail: false,
  },
];

// 表头
const columns = [
  {
    title: "成员",
    dataIndex: "userid",
  },
  {
    title: "分配总客户数",
    dataIndex: "total",
  },
  {
    title: "待添加客户数",
    dataIndex: "wait",
  },
  {
    title: (
      <div>
        待通过客户数&nbsp;
        <Tooltip
          color="#fff"
          placement="top"
          title={<p className="text-grey-900">已发送好友申请，等待客户通过</p>}>
          <QuestionCircleOutlined style={{ color: "#aaa" }} />
        </Tooltip>
      </div>
    ),
    // title: "待通过客户数",
    dataIndex: "pass",
  },
  {
    title: "已添加客户数",
    dataIndex: "add",
  },
  {
    title: "回收客户数",
    dataIndex: "retrieved_count",
  },
  {
    title: "添加完成率",
    render: (text: any) => {
      return (
        <span
          className="cursor-pointer py-0 px-8 leading-none whitespace-nowrap h-auto"
          onClick={() => {
            window.globalState.muState("history", {
              type: "push",
              pathname: "/batch_add_user/record/detail",
              query: { id: text.id },
            });
          }}>
          {((text.total_count ? text.passed_count / text.total_count : 1) * 100).toFixed(
            2
          )}
          %
        </span>
      );
    },
  },
];

// 表格数据
let initFormData: any = [];
// 当前页
let current: number = 1;
// 每页条数
let limit: number = 10;
// 总条数
let total_count: number = 0;
// 总页数
let total_page: number = 0;

const DataStatistics = () => {
  const [, setRender] = useState(0);

  // 跳转到潜在客户页
  const toHideCustomer = (status: string) => {
    window.globalState.muState("history", {
      type: "push",
      pathname: "/batch_add_user",
      query: { status },
    });
  };

  // 请求数据
  const requestRecord = async () => {
    let res: any = await staticDataGet({ current, limit });
    if (res.code === 200) {
      let { customer_overview, employee_overview } = res.data;
      /* 总览数据赋值 */
      overview.map((item: any) => {
        switch (item.status) {
          case "":
            item.num = customer_overview.total;
            break;
          case "NEW":
            item.num = customer_overview.new;
            break;
          case "WAIT":
            item.num = customer_overview.wait;
            break;
          case "ADD":
            item.num = customer_overview.add;
            break;
          case "PASS":
            item.num = customer_overview.pass;
            break;
          default:
            item.num = `${(
              (customer_overview.total
                ? customer_overview.pass / customer_overview.total
                : 1) * 100
            ).toFixed(2)}%`;
            break;
        }
      });
      /* 成员添加情况数据 */
      initFormData = employee_overview.info.map((item: any, index: number) => {
        // item.total = item.add + item.wait + item.pass;
        item.key = index;
        return item;
      });
      total_count = employee_overview.employee_total;
      total_page = employee_overview.page_total;
      setRender(Math.random() + 1);
    }
  };

  useEffect(() => {
    requestRecord();
  }, []);

  return (
    <div className="p-16 text-grey-800 text-13">
      {/* 总览 */}
      <div className="px-24 py-16 bg-white">
        <p className="font-semibold">总览</p>
        <ul className="list bg-blue-f7fcff border-1 border-solid border-blue-acd7ff pt-32 pb-24 mt-16 flex items-start">
          {overview.map((item: any) => {
            return (
              <li
                key={item.name}
                className="relative flex flex-col flex-1 items-center justify-center">
                <h2 className=" text-xl font-semibold leading-9">{item.num}</h2>
                <p className="mt-5">{item.name}</p>
                {item.detail && (
                  <span
                    className="mt-16 text-blue-default cursor-pointer"
                    onClick={() => {
                      toHideCustomer(item.status);
                    }}>
                    详情
                  </span>
                )}
              </li>
            );
          })}
        </ul>
      </div>

      {/* 成员添加情况 */}
      <div className="pt-16 mt-16 bg-white pb-16">
        <p className="font-semibold px-24">成员添加情况</p>
        <div className="mt-16 relative">
          <Table dataSource={initFormData} columns={columns} pagination={false} />
        </div>
        {total_page <= 1 ? null : (
          <Pagination
            className="text-right m-14"
            current={current}
            total={total_count}
            pageSize={limit}
            pageSizeOptions={["5", "10", "20", "50", "100"]}
            onChange={(page: any, pageSize: any) => {
              current = page;
              limit = pageSize;
              requestRecord();
            }}
            onShowSizeChange={(page, pageSize) => {
              current = page;
              limit = pageSize;
            }}
          />
        )}
      </div>
    </div>
  );
};

export default DataStatistics;
